<template>
	<view class="wanl-withdraw">
		<view class="edgeInsetTop"> </view>
		<view class="padding-tb-bj" @tap="$wanlshop.to('/pages/user/bank/bank?choice=1')">
			<view class="bank" v-if="bankData">
				<image :src="`https://img.aibbyp.com/wechat/images/bank/${bankData.bankCode}.png`"></image>
				<view class="content">
					<text>{{bankData.bankName}}</text>
					<view class="wanl-gray">
						<text>尾号 {{getCode(bankData.cardCode)}} </text>
						<text v-if="bankData.bankCode != 'WECHAT'">{{getType(bankData.cardType)}}</text>
					</view>
				</view>
				<view class="action">
					<text class="wlIcon-fanhui2"></text>
				</view>
			</view>
			<view class="bank" v-else>
				<view class="content" style="height: 80rpx; line-height: 80rpx;">
					<text>选择提现账户</text>
				</view>
				<view class="action">
					<text class="wlIcon-fanhui2"></text>
				</view>
			</view>
		</view>

		<view class="padding-bj bg-white money">
			<view class="text-lg">
				<text>提现金额</text>
				<text class="text-sm wanl-gray" v-if="servicefee > 0">（费率 {{servicefee/10}}%）</text>
			</view>
			<view class="mt24 mb24">
				<view class="usermoneyBox">
					{{usermoney}}
				</view>
			</view>
			<view class="flex_sb f28 fb mt24 mb24">
				<view class="moneysBox" @click="replaceInput({target:{value:0.3}})" :class="{'acmoneysBox':money==0.3}">
					0.3元
				</view>
				<view class="moneysBox" @click="replaceInput({target:{value:15}})" :class="{'acmoneysBox':money==15}">
					15元
				</view>
				<view class="moneysBox" @click="replaceInput({target:{value:30}})" :class="{'acmoneysBox':money==30}">
					30元
				</view>
			</view>
			<!-- 提现input -->
			<!-- <view class="margin-tb-bj price">
				<view class="symbol">
					<text>￥</text>
				</view>
				<input type="digit" maxlength="5" focus @input="replaceInput" />

				<view class="text-lg wanl-gray-light" @tap="emptyInput" v-if="money">
					<text class="wlIcon-shibai"></text>
				</view>
			</view> -->
			<view class="solid-top padding-top-bj">
				<block v-if="servicefee > 0">
					<text class="wanl-gray-light">服务费</text>
					<text class="text-price text-orange margin-left-xs">{{servicemoney}}</text>
					<text class="wanl-gray-light">，</text>
				</block>
				<!-- <text class="wanl-gray-light">可用余额</text>
				<text class="wanl-gray-light margin-lr-xs text-price">{{usermoney}}</text>
				<text class="text-orange" v-if="usermoney > 0" @tap="moneyAll">全部</text> -->
			</view>
		</view>

		<view class="padding-bj margin-top" v-if="userInfo.level == 2">
			<!-- 1.0.5升级 -->
			<button class="mix-btn wanl-bg-redorange" :loading="loading" :disabled="loading" @tap="withdraw">提现</button>
		</view>
		<view class="padding-bj  money">
			<view>提现说明:</view>
			<view>用户信息为工匠才能提现</view>
			<view>提现到支付宝或微信金额以"元"为单位，申请提现次日24小时到账(遇节假日顺延)</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				user: {},
				xiaokeaiShow: false,
				bankData: null,
				usermoney: 0,
				money: null,
				servicemoney: 0,
				servicefee: 0,
				loading: false
			};
		},
		onLoad() {
			this.loadData();
			this.userInfo = uni.getStorageSync('wanlshop:user')
		},
		onShow() {
			this.loadData1()
			console.log(this.bankData);
		},
		methods: {
			loadData1() {
				this.$api.post({
					url: '/wanlshop/user/refresh',
					success: res => {
						this.user = res
						this.$store.commit('statistics/edit', res.statistics);
						this.$store.commit('user/setUserInfo', res.userinfo);
					}
				});
				uni.stopPullDownRefresh();
			},
			async loadData() {
				this.$api.post({
					url: '/wanlshop/pay/initialWithdraw',
					success: res => {
						//更新全局金额
						this.setMoney(res.money);
						//获取提现账户
						this.bankData = res.bank;
						// 服务费
						this.servicefee = res.servicefee;
					}
				});
			},
			withdraw() {
				// 1.0.5升级 修复针对多次点击
				if (this.user.userinfo.is_auth == 0) {
					uni.showModal({
						title: '提现失败',
						content: '未实名认证，请先实名认证',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/user/idCard/idCard'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
					return
				}
				if (this.loading) return;
				this.loading = true;
				// 1.0.6升级
				let money = parseFloat(this.money),
					usermoney = parseFloat(this.usermoney);
				if (!this.bankData) {
					this.$wanlshop.msg('请选择账号');
					return;
				}
				if (money <= 0) {
					this.$wanlshop.msg('请填写正确金额');
					return;
				}
				if (money > usermoney) {
					this.$wanlshop.msg('提现金额不能超过 ' + usermoney + ' 元');
					return;
				}
				this.$api.post({
					url: '/wanlshop/pay/withdraw',
					data: {
						type: this.bankData.bankCode == 'WECHAT' ? 'wechat' : '',
						money: money,
						account_id: this.bankData.id
					},
					success: res => {
						// 1.0.5升级
						this.loading = false;
						if (this.bankData.bankCode != 'WECHAT') {
							this.$wanlshop.to('/pages/page/success?type=withdraw');
							return
						}
						// #ifdef MP-WEIXIN
						if (wx.canIUse('requestMerchantTransfer')) {
							wx.requestMerchantTransfer({
								mchId: '1648983694',
								appId: 'wxc1407222bdbad446',
								package: res.package_info,
								success: res1 => {
									// res.err_msg将在页面展示成功后返回应用时返回ok，并不代表付款成功
									console.log('success:', res1);
									this.paySuccess()

								},
								fail: error1 => {
									console.log('fail:', error1);
									this.payFail(error1.errMsg, res.out_bill_no)
								},
							});
						} else {
							wx.showModal({
								content: '你的微信版本过低，请更新至最新版本。',
								showCancel: false,
							});
						}
						// #endif

						// #ifdef H5
						let msg = this.$jssdk.payToUser(res.package_info)
						if (msg == 'requestMerchantTransfer:ok') {
							this.paySuccess()
						} else {
							this.payFail(msg, res.out_bill_no)
						}
						// #endif
						// 跳转成功
						// this.$wanlshop.to('/pages/page/success?type=withdraw');


					},
					fail: error => {
						this.loading = false;
					}
				});
			},
			paySuccess() {
				uni.navigateBack({
					delta: 1
				})
			},
			payFail(msg, out_bill_no) {
				this.loading = false;
				this.$api.post({
					url: '/wanlshop/pay/cancel_bills',
					data: {
						out_bill_no: out_bill_no,
					},
					success: res => {}
				})


			},
			setMoney(money) {
				this.usermoney = money;
				this.$store.commit('user/setUserInfo', {
					money: money
				});
			},
			replaceInput(e) {
				this.money = e.target.value;
				this.servicemoney = e.target.value > 0 ? (e.target.value * this.servicefee / 1000).toFixed(2) : 0;
			},
			emptyInput() {
				this.money = null;
			},
			moneyAll() {
				this.money = this.usermoney;
			},
			getCode(str) {
				str = str.replace(/\s+/g, "");
				return str.substring(str.length - 4);
			},
			getType(key) {
				return ['储蓄卡', '信用卡'][key];
			}
		}
	}
</script>

<style>
	.usermoneyBox {
		border-radius: 12rpx;
		font-weight: bold;
		font-size: 60rpx;
		color: #fa3534;
		padding: 60rpx;
		background: #fef0f0;
	}



	.moneysBox {
		background: #eee;
		width: 30%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		border-radius: 12rpx;
	}

	.acmoneysBox {
		background: #a0cfff;
	}

	.wanl-withdraw .money .symbol {
		font-size: 60rpx;
		margin-right: 10rpx;
	}

	.wanl-withdraw .money .price {
		display: flex;
		align-items: center;
	}

	.wanl-withdraw .money .price input {
		/* #ifdef MP */
		height: 100rpx;
		min-height: 100rpx;
		/* #endif */
		width: 100%;
		font-size: 100rpx;
	}

	.wanl-withdraw .bank {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;
		padding: 20rpx 25rpx;
	}

	.wanl-withdraw .bank image {
		width: 100rpx;
		height: 100rpx;
		margin-right: 25rpx;
	}

	.wanl-withdraw .bank .content {
		flex: 1;
	}

	.wanl-withdraw .bank .action {}
</style>